<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>computed响应式案例</title>
  </head>
  <body>
    <button id="addCount">count+1</button>
    <button id="logDouble">打印doubleCount</button>
    <script>
      // （此处省略ref、effect、ComputedImpl、computed的实现代码）

      // 1. 创建响应式数据
      const count = ref(10);

      // 2. 创建computed：依赖count，计算双倍值
      const doubleCount = computed(() => {
        console.log("执行计算：count.value * 2");
        return count.value * 2;
      });

      // 3. 注册依赖computed的effect
      effect(() => {
        console.log("当前doubleCount：", doubleCount.value);
      });
      // 首次执行会打印：
      // "执行计算：count.value * 2"
      // "当前doubleCount：20"

      // 4. 点击按钮修改count
      document.getElementById("addCount").onclick = () => {
        count.value++; // 修改后会触发doubleCount的重新计算
      };

      // 5. 点击按钮多次访问doubleCount（验证缓存）
      document.getElementById("logDouble").onclick = () => {
        console.log("访问doubleCount：", doubleCount.value);
        // 多次点击，只有count变化后才会重新计算
      };
    </script>
  </body>
</html>
